<template>
  <div class="header-content">
    <div class="header-content-left">
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="changeCollapased()"
      />
    </div>
    <div class="header-content-right">
      <!-- <a-badge dot class="hint-icon">
        <a-icon type="bell" @click="$router.push({path:'messageList',query:{userId:userInfo.userId}})"/>
      </a-badge> -->
      <div class="user-box">
        <a-avatar icon="user" />
        <!-- <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> -->
        <span class="name">{{userInfo.realName}}</span>
      </div>
      <!-- <a-button type="link" @click="logout()">注销登录</a-button> -->
    </div>
  </div>
</template>
<script>
// 接口
import {logout} from "@/request/api";
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  data() {
    return {
      collapsed: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  components: {},
  mounted(){
    console.log('header mounted')
    console.log(this.userInfo)
  },
  methods: {
    changeCollapased() {
      this.collapsed = !this.collapsed;
      Bus.$emit("collapsed", this.collapsed);
    },

    // 退出登录
    async logout() {
      let { data } = await logout({
        AccessToken: localStorage.getItem("token"),
      });
      if (data.code === 200) {
        localStorage.removeItem("token");
        localStorage.removeItem("userInfo");
        this.$router.push({path:'/login'})
        this.$message.success('注销成功')
      }else{
        this.$message.error(data.message);
      }
      this.tableLoading = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/base.less";

.header-content {
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  .trigger:hover {
    color: @c1;
  }
  .trigger {
    font-size: 18px;
    line-height: 64px;
    cursor: pointer;
    transition: color 0.3s;
  }
  &-right {
    display: flex;
    align-items: center;
    .hint-icon {
      cursor: pointer;
    }
    .user-box {
      display: flex;
      margin-left: 20px;
      cursor: pointer;
      align-items: center;
      color: @c2;
      .name {
        margin-left: 10px;
      }
    }
  }
}
</style>
